<template>
  <div class="container">
    <div class="app-container">
      <div class="tree">
        <el-tree default-expand-all :data="departmentList" :props="defaultProps" :expand-on-click-node="false">
          <!-- 节点结构 -->
          <!-- v-slot="{ node, data }" 只能作用在template -->
          <template v-slot="{ data }">
            <el-row style="width:100%;height:40px" type="flex" justify="space-between" align="middle">
              <el-col>{{ data.name }}</el-col>
              <el-col :span="4">
                <span class="tree-manager">{{ data.managerName }}</span>
                <!-- $event 实参 表示类型 -->
                <el-dropdown @command="handleCommand">
                  <!-- 显示区域内容 -->
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <!-- 下拉菜单选项 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{ action: 'add', id: data.id}">添加子部门</el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'edit', id: data.id }">编辑部门</el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'del', id: data.id }">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </div>
    </div>
    <AddDept :id.sync="id" :show-dialog.sync="showDialog" :title="title" @showDialog="showDialog = $emit" @submit="getDepartmentList()" />
  </div>
</template>

<script>
import { delDepartmentAPI, getDepartmentListAPI } from '@/api/department'
import AddDept from '@/layout/components/AddDept'
import { buildHierarchy } from '@/utils'

export default {
  name: 'Department',
  components: { AddDept },
  data() {
    return {
      depts: [],
      showDialog: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      title: '',
      id: ''
    }
  },
  computed: {
    departmentList() { return buildHierarchy(this.depts) }
  },
  async created() {
    await this.getDepartmentList()
  },
  methods: {
    async getDepartmentList() {
      const res = await getDepartmentListAPI()
      this.depts = res
    },
    handleCommand(command) {
      const { action, id } = command
      switch (action) {
        case 'add':
          this.addDepartment(id)
          break
        case 'edit':
          this.editDepartment(id)
          break
        case 'del':
          this.deleteDepartment(id)
          break
      }
    },
    addDepartment(id) {
      this.id = id
      this.title = '新增部门'
      this.showDialog = true
    },
    editDepartment(id) {
      this.id = id
      this.title = '编辑部门'
      this.showDialog = true
    },
    async deleteDepartment(id) {
      try {
        await delDepartmentAPI(id)
        this.$message.success('删除成功')
        this.getDepartmentList()
      } catch (error) {
        this.$message.error(error.message)
      }

      // 处理删除部门的逻辑
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}

.tree-manager {
  width: 50px;
  display: inline-block;
  margin: 10px;
}
</style>
